<template>
  <div class="container">
    <div class="app-container">
      <!--  放置树形组件 -->
      <!--
        :data="depts"描述的是父传子  此时数据在子组件 el-tree
        el-row 是通过el-tree的默认插槽传入到子组件el-tree
        结论： 数据在el-tree 结构el-row在父组件
        问题： 数据和结构不在一起
        解决： 使用作用于插槽传值 由el-tree的插槽将数据传回到父组件 供el-row实用
        expand-on-click-node="false" 是否默认展开树形结构
        default-expand-all 小三角是否显示
       -->
      <el-tree default-expand-all :data="depts" :props="defaultProps" :expand-on-click-node="false">
        <!-- 树形结构的第一行 每行有两列 -->
        <template #default="{ data }">
          <el-row
            type="flex"
            justify="space-between"
            align="middle"
            style="width: 100%;height: 40px"
          >
            <el-col>
              <!-- 第一列 部门名称 -->
              <span>{{ data.name }}</span>
            </el-col>
            <!--  第二列 部门负责人  +  操作  -->
            <el-col :span="4">
              <div>
                <span class="tree-manager">{{ data.managerName }}</span>
                <!-- 下拉菜单 -->
                <el-dropdown @command="operateDept($event,data.id)">
                  <!-- 等价于 <el-dropdown @command="operateDept（$event）">-->
                  <!--  $event 事件对象 默认的实参 此时就是command传入的值-->
                  <span>操作 <i class="el-icon-arrow-down" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="add">添加部门</el-dropdown-item>
                    <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                    <el-dropdown-item command="del">删除部门</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 弹层类型的组件 独立于整体结构 放在根结点 -->
    <add-dept
      ref="addDept"
      :show-dialog.sync="showDialog"
      :current-node-id="currentNodeId"
      @updateDepartment="getDepartments"
    />
  </div>
</template>
<script>
import { delDepartmentDetail, getDepartmentList } from '@/api/departments'
import { transListToTreeData } from '@/utils/index'
import AddDept from './showDialog/add-dept.vue'
// import DelDept from './showDialog/del-dept.vue'
// import EditDept from './showDialog/edit-dept.vue'
export default {
  name: 'Department',
  components: {
    AddDept
    // EditDept,
  },
  data() {
    // 组织架构树星结构数据源
    return {
      showDialog: false,
      depts: [{
        name: '传销教育',
        mangerName: '张三8',
        children: [
          { name: '总裁办', mangerName: '张三2' },
          { name: '行政部', mangerName: '张三3' },
          { name: '人事部', mangerName: '张三4',
            children: [
              { name: '财务核算部', mangerName: '张三5' },
              { name: '税务管理部', mangerName: '张三6' },
              { name: '薪资管理部', mangerName: '张三7' }
            ] }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentNodeId: null
    }
  },
  // 生命周期的created方法 发送请求
  created() {
    // 获取部门列表数据
    this.getDepartments()
  },
  methods: {
    // 封装获取部门列表数据的方法
    async getDepartments() {
      // 调用获取部门列表数据的接口方法
      const res = await getDepartmentList()
      console.log(res)
      this.depts = transListToTreeData(res, 0) // 调用方法 传入起始值
    },
    // 操作部门 添加  删除  编辑 部门
    operateDept(type, id) {
      if (type === 'add') {
        // console.log('添加部门')
        this.showDialog = true
        console.log('添加子部门的父级id', id)
        this.currentNodeId = id
      } else if (type === 'edit') {
        console.log('编辑部门')
        // 展示弹层
        this.showDialog = true
        // 将当前部门id传递给弹层组件
        this.currentNodeId = id
        // 调用子级通过id获取部门详情数据的方法
        // 对象。方法名
        // 注意！！经验！！！showDialog和currentNodeId是同步的
        // 上边的刷新没做完 就会执行后边的代码  所以 要用this.$nextTick(()=>{}) 解决问题
        this.$nextTick(() => {
        // 调用子级通过id获取部门详情数据的方法
          this.$refs.addDept.getDepartmentDetail()
        })
      } else {
        this.$confirm('确认删除吗').then(async() => {
          console.log('确认删除', id)
          await delDepartmentDetail(id)
          this.$message.success('删除成功')
          this.getDepartments()
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .app-container {
    font-size: 14px;
    .tree-manager {
    margin-right: 10px;
    width: 50px;
    display: inline-block;
    }
  }
</style>
